import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:like_button/like_button.dart';
import 'package:live_music/components/ui/theme.dart';
import 'package:live_music/event/commentEvent.dart';
import 'package:live_music/models/comment_detail_model.dart';
import 'package:live_music/pages/comment/comment_detail.dart';
import 'package:live_music/utils/cgq_utils.dart';
import 'package:live_music/utils/colors.dart';
import 'package:live_music/utils/eventBusUtils.dart';
import 'package:live_music/utils/screen_utils.dart';
import 'package:live_music/utils/util.dart';
import 'package:loading_more_list/loading_more_list.dart';

class CommentCard extends StatefulWidget {
  CommentCard({Key key, this.momentId,this.commentItem}) : super(key: key);
  int momentId;
  CommentDetailModel commentItem;
  @override
  _CommentCardState createState() => _CommentCardState();
}

class _CommentCardState extends State<CommentCard>
    with SingleTickerProviderStateMixin {
  CommentDetailModel _commentItem;
  @override
  void initState() {
    setState(() {
      _commentItem = widget.commentItem;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          border: Border(
        bottom: BorderSide(width: .5, color: WcaoTheme.outline),
      )),
      width: screenWidth(context),
      margin: EdgeInsets.only(bottom: 15),
      padding: EdgeInsets.only(bottom: 15),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 30,
            height: 30,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(15),
              child: CgqUtils.imageCache(_commentItem.userAvatarUrl,
                  fit: BoxFit.cover),
            ),
          ),
          SizedBox(
            width: 10,
          ),
          Expanded(
              child: InkWell(
                  onTap: () {
                    EventBusUtils.getInstance()
                        .fire(CommentEventPublish(_commentItem));
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        _commentItem.userName,
                        style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.bold,
                            fontSize: 14),
                      ),
                      SizedBox(
                        height: 3,
                      ),
                      Text(getDateTime(_commentItem.createTime),
                          style:
                              TextStyle(color: Colors.grey[400], fontSize: 10)),
                      SizedBox(
                        height: 5,
                      ),
                      Text(
                        _commentItem.content,
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.black,
                        ),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      // SizedBox(
                      //   width: 5,
                      // ),
                      _commentItem.replyCount != null
                          ? InkWell(
                              child: Text(
                                _commentItem.replyCount.toString() + '回复',
                                style: TextStyle(
                                    fontSize: 12,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.blueAccent),
                              ),
                              onTap: () {
                                Get.to(CommentDetailPage(
                                    momentId: widget.momentId,
                                    commentId: _commentItem.id));
                              },
                            )
                          : Container(),
                    ],
                  ))),
          SizedBox(
            width: 10,
          ),
          Column(
            children: [
              LikeButton(
                  isLiked: _commentItem.hasLiked,
                  onTap: (isLiked) {
                    return Future.value(!isLiked);
                  },
                  size: 20,
                  circleColor: CircleColor(
                      start: ColorRes.color_3, end: ColorRes.color_3),
                  likeBuilder: (isLike) {
                    return isLike == true
                        ? Image.asset('assets/images/common/red_heart.webp')
                        : Icon(
                            Icons.favorite_border_outlined,
                            size: 20,
                            color: WcaoTheme.secondary,
                          );
                  },
                  bubblesColor: const BubblesColor(
                    dotPrimaryColor: ColorRes.color_3,
                    dotSecondaryColor: ColorRes.color_3,
                    dotThirdColor: ColorRes.color_3,
                    dotLastColor: ColorRes.color_3,
                  )),
              Text(
                _commentItem.likeCount.toString(),
                style: TextStyle(fontSize: 12, color: Colors.grey),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
